<template>
  <div class="rule-group allowance-container">
    
    <div class="attendance-content" v-if="!hide">
       <div class="header-tip flex">
      <span>请先在【薪酬设置】设置企业的工资表模板，然后新增计薪规则【计时工资—>计件工资—>绩效规则—>津补贴规则—>计税规则—>考勤计薪规则——>薪资组】</span>
      <Icon type="ios-close" size="18" />
    </div>
    <div class="guide-intro">
      <div class="guide-title">使用指南</div>
      <div class="guide-content">
        <div class="guide-item">1、津补贴方案，即对应“薪酬设置”内薪酬结构所启用的各个津补贴项目，设置企业每月津补贴的发放规则。</div>
        <div class="guide-item">2、同一方案内可设置多个津补贴项目的规则。设置后，请到薪资组关联对应的方案，一个薪资组内的员工共用一套津补贴方案。</div>
        <div class="guide-item">3、工资核算时，根据该方案设置的规则，对员工实际考勤情况进行工资换算。</div>
      </div>
    </div>

    <div class="header-switch">
        <div class="h-s-tip">已启用津补贴方案，月工资表中的在线编辑津补贴将被禁用，按您设置的津补贴方案计算</div>
        <div class="h-s-content flex-box">
            <i-switch  size="large">
                <span slot="open">开启</span>
        <span slot="close">关闭</span>
            </i-switch>
          <span class="ml12">津补贴方案开关</span>
        </div>
    </div>
    <div class="query-section flex">
      <div class="left-query-wrap flex-box"></div>
      <Button class="save-btn-green" @click="toDetail">新增补贴方案</Button>
    </div>
    <div class="table-section">
      <Table width="100%" :columns="columns" :data="data4"></Table>
      <Nodata desc="暂无数据"></Nodata>
    </div>
    </div>

    <div class="sub-content" v-if="hide">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      vertical: "1",
      current: 0,
      formItem: {
        input: ""
      },
      modal2: false,
      data4: [],
      columns: [
        {
          title: "方案名称",
          key: "name"
        },
        {
          title: "请假扣款规则",
          key: "age"
        },
        {
          title: "加班费规则",
          key: "province"
        },
        {
          title: "全勤奖规则",
          key: "city1"
        },
        {
          title: "旷工扣款规则",
          key: "city2"
        },
        {
          title: "适用薪资组",
          key: "city3"
        },
        {
          title: "操作",
          key: "action",
          width: 120,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "text",

                    className: "table-action-btn"
                  },
                  class: "table-action-btn",
                  on: {
                    click: () => {
                      this.openRightCard(params.index);
                    }
                  }
                },
                "编辑"
              )
            ]);
          }
        }
      ]
    };
  },
  methods: {
    toDetail() {
      this.$router.push("/payroll/salary/rule/allowance/add");
    }
  },
  computed: {
    date() {
      let a = [];
      for (var i = 1; i <= 31; i++) {
        a.push(i);
      }
      return a;
    },
    hide() {
      let route = this.$route.matched;
      let matched = route[route.length - 1].path;
      return matched.includes("allowance/add");
    }
  }
};
</script>
<style lang="scss" scoped src='../index.scss'>
</style>